<template>
  <div>
    <a-modal v-model:visible="visible" :width="600">
      <template #title>
        <h3>基础信息填写</h3>
      </template>
      <template #footer>
        <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkClick" class="sub-btn">确定</a-button>
      </template>
      <div class="main">
          <a-form>
              <a-form-item name="date-picker" label="编号：">
                  {{ props.showBasicInfoWriteId }}
              </a-form-item>
              <a-form-item label="规格型号：" required>
                  <a-input v-model:value="modalRef.specification" />
              </a-form-item>
              <a-form-item label="保管人：" required>
                  <a-input v-model:value="modalRef.keeper" required/>
              </a-form-item>
              <a-form-item label="试验结论：" required>
                  <a-space>
                      <a-select ref="select" v-model:value="modalRef.operateConclusion" style="width: 200px">
                          <a-select-option value="合格">合格</a-select-option>
                          <a-select-option value="报废">报废</a-select-option>
                      </a-select>
                  </a-space>
              </a-form-item>
          </a-form>   
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref,reactive,onMounted,watch} from 'vue';
import { Form, message } from 'ant-design-vue'
import request from '@/utils/request'
const emit = defineEmits(['loadData'])
const specificationModel=ref()
const modalRef = reactive({
  specification: '',
  keeper: '',
  operateConclusion:'',
})
  const props=defineProps(['showBasicInfoWriteId'])
  const visible = ref(false);
  const statusValue=ref('正常')
  const showModal = () => {
      visible.value = true;
    };
   
  // const onSubmit = () => {
  //   validate().then(() => {
  //     request({
  //         url:'/feathers/gd-quota-process',
  //         data:{
  //             ...formState,
  //         },
  //         method:'post'
  //     }).then((res)=>{
  //         formState.workshop_id=''
  //         formState.team_id=''
  //         formState.insulatedEquipment=''
  //         formState.count=''
  //         formState.unit=''
  //         visible.value=false
  //         emit('loadData')
  //     })
      
  //   }).catch(err => {
  //     console.log(111111)
  //     console.log('error', err);
  //   });
  // };

//取消按钮
const handleCancelClick = () => {
  visible.value = false;
  modalRef.specification =''
  modalRef.keeper= ''
  modalRef.operateConclusion=''
}
//确定按钮
const handleOkClick = async() => {
const result = await request({
  url:'/tools/edit',
  method:'post',
  data:{
    id:props.showBasicInfoWriteId,
    specification:modalRef.specification,
    keeper:modalRef.keeper,
    operateConclusion:modalRef.operateConclusion
  }
})
  emit('loadData')
  visible.value = false;
  modalRef.specification =''
  modalRef.keeper= ''
  modalRef.operateConclusion=''
}  

defineExpose({
showModal
})

</script>
<style lang="less" scoped>
h3{
    display: inline-block;
    font-weight: 900;
  }
.set-container{
  /* height: 100px; */
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  width: 100%;
}
.ant-row{
  margin-bottom: 10px;
}
.ant-col .add-btn{
  background-color: #169bd5;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  color: white;
  height: 30px;
  width: 80px;
}

.basicInfoWriteContent{
  // font-weight: bold;
  font-size: 20px;
}
.sub-btn{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 38px;
    width: 80px;
    padding: 0;
}    
.btn{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: #292929;
    height: 38px;
    width: 80px;
    padding: 0;
}   
//   .main{
//     padding-left: 20px;
// }
/deep/ .ant-input{
  width: 200px;
}
/deep/.ant-form-item-label > label{
      width: 200px;
    justify-content: flex-end;
} 
</style>